<template>
	<view>
		<view class="block-view">
		    <goods-info :goodsName="comments.goods_name" :goodsImg="comments.goods_img"></goods-info>
		</view>
		<view class="goods-comments">
		    <view class="comments-info">
		        <view class="u-flex u-row-between">
		            <view class="u-flex">
		                <view class="u-m-r-26">
		                    <u-image width="70" height="70" shape="circle" :src="comments.member_face"></u-image>
		                </view>
		                <view>{{ comments.member_name }}</view>
		            </view>
		            <view class="time-info">{{ comments.create_time | date('yyyy-mm-dd hh:MM:ss') }}</view>
		        </view>
		        <view class="grade-info">
                    <view>{{ comments.grade | filterGrade }}</view>
		            <!-- <u-icon class="u-m-r-4 u-font-10" name="star-fill" color="#f42424" v-for="(star, starIndex) in comments.grade" :key="starIndex"></u-icon> -->
		        </view>
		        <view class="u-p-l-35 u-p-r-35">
		            <view class="u-m-b-20 u-line-5">{{ comments.content }}</view>
		            <view class="u-flex u-flex-wrap" v-if="comments.images">
		                <view class="comment-img u-m-r-15 u-m-b-15" v-for="(img, imgIndex) in comments.images" :key="imgIndex">
		                    <u-image width="200" height="200" :src="img" @click="handlePreviewImage(comments.images, imgIndex)"></u-image>
		                </view>
		            </view>
		        </view>
                <!-- 追评 -->
                <view v-if="comments.additional_comment">
                    <view class="u-flex u-row-between u-margin-left-30">
                        <view class="add-title">追评</view>
                        <view class="time-info">{{comments.additional_comment.create_time | date('yyyy-mm-dd hh:MM:ss')}}</view>
                    </view>
                    <view class="u-m-l-35 u-p-r-35">
                        <view class="u-m-b-20 u-line-5">{{ comments.additional_comment.content }}</view>
                        <view class="u-flex u-flex-wrap" v-if="comments.additional_comment.images">
                            <view class="comment-img u-m-r-15 u-m-b-15" v-for="(img, imgIndex) in comments.additional_comment.images" :key="imgIndex">
                                <u-image width="200" height="200" :src="img" @click="handlePreviewImage(comments.additional_comment.images, imgIndex)"></u-image>
                            </view>
                        </view>
                    </view>
                </view>
		    </view>
		</view>
        <!-- 店铺评分 -->
        <view v-if="comments.member_shop_score" class="shop-info">
            <view class=shop-score>店铺评分</view>
            <view class="shop-score-box">
                <view class="u-flex">
                    <view class="score-text">描述相符</view>
                    <view class="grade-info">
                        <u-rate v-model="comments.member_shop_score.description_score" :disabled="true" inactive-color="#FD5B00"></u-rate>
                    </view>
                    <view>{{countGradeText(comments.member_shop_score.description_score)}}</view>
                </view>
                <view class="u-flex">
                    <view class="score-text">服务态度</view>
                    <view class="grade-info">
                        <u-rate v-model="comments.member_shop_score.service_score" :disabled="true" inactive-color="#FD5B00"></u-rate>
                    </view>
                    <view>{{countGradeText(comments.member_shop_score.service_score)}}</view>
                </view>
                <view class="u-flex">
                    <view class="score-text">物流服务</view>
                    <view class="grade-info">
                        <u-rate v-model="comments.member_shop_score.delivery_score" :disabled="true" inactive-color="#FD5B00"></u-rate>
                    </view>
                    <view>{{countGradeText(comments.member_shop_score.delivery_score)}}</view>
                </view>
            </view>
        </view>
	</view>
</template>

<script>
    import * as API_Member from '@/api/members.js'

	export default {
		data() {
			return {
                params: {
                    comment_id: '',
                },
                comments: {},
			};
		},
        onLoad(options) {
            console.log(options.comment_id)
            this.params.comment_id = options.comment_id;
            this.loadData();
        },
        filters: {
              /** 评分 */
              filterGrade(val) {
                switch (val) {
                  case 'bad':
                    return '差评'
                  case 'neutral':
                    return '中评'
                  default:
                    return '好评'
                }
              }
            },
        methods: {
            countGradeText(val) {
                    switch (val) {
                      case 5: return '非常好'
                      case 4: return '好'
                      case 3: return '一般'
                      case 2: return '差'
                      case 1: return '非常差'
                      default: return '非常好'
                    }
                  },
            //加载数据
            loadData(){
                API_Member.getCommentsDetail(this.params.comment_id).then(res =>{
                    console.log(res);
                    this.comments = res;
                })
            },
            //图片预览
            handlePreviewImage(image, index) {
                uni.previewImage({
                    current: index,
                    urls: image
                })
            },
        }
	}
</script>

<style lang="scss">
    .block-view {
        background-color: #FFFFFF;
        padding: 5rpx 30rpx;
    }
    .block-title {
        background-color: #f3f4f6;
        padding: 10rpx 30rpx;
        font-weight: 600;
    }
    .goods-comments {
        .comments-info {
            background-color: #FFFFFF;
            border-radius: 20rpx;
            padding: 20rpx;
            margin: 20rpx 0;
            .comment-img {
                border-radius: 10rpx;
                overflow: hidden;
            }
            .grade-info {
                margin: 10rpx 30rpx;
            }
        }
        .time-info, .reply-info {
            color: #999999;
            font-size: 24rpx;
            padding: 20rpx 30rpx;
            .reply-line {
                height: 2rpx;
                border-top: 2rpx solid #F7F7F7;
                .reply-line-txt {
                    top: -24rpx;
                    border: 12rpx solid;
                    border-color: transparent transparent #F7F7F7;
                }
            }
        }
        .add-title {
            font-size: 31rpx;
            font-weight: 600;
        }
    }
    .shop-info {
       background-color: #FFFFFF;
       border-radius: 20rpx;
       padding: 20rpx;
       margin: 20rpx 0;
       .u-flex {
           padding: 15rpx 0;
       }
       .shop-score {
           font-size: 32rpx;
           font-weight: bold;
           padding-bottom: 10rpx;
       }
       .grade-info {
           padding: 0 20rpx;
       }
    }
</style>
